<template>
  <div class="swiper-part">
      <swiper :list="swiperLists"
          auto
          style="width:100%;"
          height="220px"
          dots-class="custom-bottom"
          :show-desc-mask="true"
          dots-position="center"></swiper>
  </div>
</template>
<script>
import axios from "axios";
import { Swiper } from "vux";
import { log } from "util";
export default {
  data() {
    return {
      swiperLists: []
    };
  },
  created() {
    axios
      .get("api/news/latest")
      .then(res => {
        var mapList = res.data.top_stories;
        this.swiperLists = mapList.map((item, index) => ({
          url: `/newsDetail/${item.id}`,
          img: item.image,
          title: item.title
        }));
      })
      .catch(error => {
        alert(error);
      });
  },
  methods: {
    gotoDetail(id) {
      return this.$router.push({ name: 'newsDetail', params: { id: id } });
    }
  },
  components: {
    Swiper
  }
};
</script>
<style lang="less">
.swiper-part .vux-slider > .vux-swiper > .vux-swiper-item > a > .vux-swiper-desc {
    font-size: 20px;
    bottom: 28px;
    background-image: none;
    padding: 20px 20px 5px;
}
</style>
